<template>
    <div class="app-container">
        <div class="linebtn">
          <div class="btn" v-hasPermi="['massage:massage:getMags']" @click="golink">群聊天详情</div>
          <div class="btn select">未加好友列表</div>
        </div>
      <el-form :model="queryParams" class="frominfo" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
        <div class="from-item">
           <el-form-item label="微信名称" prop="groupUserName">
             <el-input v-model="queryParams.groupUserName" @keyup.enter.native="handleQuery" placeholder="请输入群成员微信名称" clearable/>
           </el-form-item>
           <el-form-item label="活跃度" prop="liveLevel">
             <el-select v-model="liveLevel" placeholder="请选择群成员活跃度" clearable>
               <el-option v-for="dict in dict.type.sys_active_level" :key="dict.value" :label="dict.label" :value="dict.value"/>
             </el-select>
           </el-form-item>
        </div>
        <div class="from-Btn">
          <el-form-item>
              <el-button class="blue-button" type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
           <el-button class="blue-button" plain icon="el-icon-folder-add" size="mini"  @click="handleUpdate" v-hasPermi="['arbit:wcgroupsuser:edit']">批量添加</el-button>
        </el-col>
        <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
      </el-row>
  
      <el-table v-loading="loading" :data="wcGroupsUserList" @selection-change="handleSelectionChange" :header-cell-style="{ background: '#fcfcfd', color: '#000' }"  :border="false">
        <el-table-column type="selection" width="55" align="center" :show-overflow-tooltip="true"/>
        <el-table-column label="微信名称" prop="groupUserName" align="center" :show-overflow-tooltip="true"/>
        <el-table-column label="所在群名" prop="wcGroupName" align="center" :show-overflow-tooltip="true"/>
        <el-table-column label="活跃度" prop="liveLevel" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <dict-tag :options="dict.type.sys_active_level" :value="scope.row.liveLevel"/>
            </template>
        </el-table-column>
        <el-table-column label="同群营销助手" prop="wcName" align="center" :show-overflow-tooltip="true"/>
        <el-table-column label="最新聊天时间" prop="lastChatTime" align="center" :show-overflow-tooltip="true" width="180">
            <template slot-scope="scope">
                <span>{{ parseTime(scope.row.lastChatTime, '{y}-{m}-{d}') }}</span>
            </template>
        </el-table-column>
        <el-table-column label="微信号操作" align="center" width="120" class-name="small-padding fixed-width">
            <template slot="header">
              <span>微信号操作</span>
              <el-tooltip class="item" effect="dark" content="点击添加好友" placement="right">
                <i class="el-icon-warning" style="color:#818e96;"></i>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <span @click="handleUpdate(scope.row)" style="cursor: pointer;color:#0078fb">加好友</span>
            </template>
        </el-table-column>
      </el-table>
  
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
  
      <!-- 添加或修改微信群成员对话框 -->
      <el-dialog  :visible.sync="open" width="400px" append-to-body>
        <div style="margin-top: -40px;">
          <i class="el-icon-question" style="color:#ffc53d"></i>
          <span style="font-size: 14px;">确认发送添加好友申请么？</span>
        </div>
        <div class="box-setups">
            <span style="margin-right: 10px;"><span style="color: #ff6d6f;">*</span>申请好友用语</span>
            <el-autocomplete
              type="textarea" 
              rows="4" 
              :maxlength="460"
              class="my-autocomplete"
              v-model="applyContent"
              ref="autocomplete"
              :fetch-suggestions="querySearch"
              placeholder="请输入或选择内容"
              @select="handleSelect">
              <template slot-scope="{ item }">
                <div class="name">{{ item.label }}</div>
              </template>
            </el-autocomplete>
        </div>
        
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  
  import request from '@/utils/request'
  
  export default {
    name: "WcGroupsUser",
    dicts: ['sys_active_level'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        pageList:[],
        // 微信群成员表格数据
        wcGroupsUserList: [],
        // 是否显示弹出层
        open: false,
        liveLevel:null,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          id: null,
          wcId: null,
          addState:0,
          wcGroupId: null,
          groupUserName: null,
          groupUserId: null,
          groupUserImg: null,
          groupUserNumber: null,
          liveLevel: null,
          lastChatTime: null,
        },
        applyContent:"",
        id:[],
        name:'',
      };
    },
    created() {
      
    },
    mounted(){
      //console.log(this.$route.query)
      this.name=this.$route.query.name;
      this.queryParams.wcId = this.$route.query.wxid;
      this.queryParams.wcGroupId = this.$route.query.groupid;
      this.getList();
      this.getPage()
    },
    methods: {
      golink(){
        this.$router.push({ path:"/group/detial/",name:'detial',query: { wxid: this.$route.query.wxid,groupid:this.$route.query.groupid,name:this.name }}).catch(()=>{});
      },
      getPage(){
        page({pageNum: 1,pageSize: 999,termType:1,wcId:this.queryParams.wcId}).then(res => {
          //console.log(res)
          if (res['success']) {
            const dt = res['data'];
            this.pageList =dt['records'].map(key => {
              return {label:key.content,value:key.termId}
            })
          }
        });
      },
      querySearch(queryString, cb) {
        var restaurants = this.pageList;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.label.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        this.applyContent=item.label
      },
      /** 查询微信群成员列表 */
      getList() {
        this.loading = true;
        listWcGroupsUser(this.queryParams).then(res => {
          if (res['success']) {
            const dt = res['data'];
            this.total = dt['total'];
            this.wcGroupsUserList = dt['records'];
          }
          this.loading = false;
        });
        setTimeout(()=>{
          this.loading = false;
        },2000)
      },
      // 取消按钮
      cancel() {
        this.open = false;
      },
      /** 搜索按钮操作 */
      handleQuery() {
        if(this.liveLevel!=''&&this.liveLevel!=null){
          var level=this.liveLevel
          var num=level=='0'?10:level=='1'?30:90
          this.queryParams.liveLevel=num
        }
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.liveLevel=null
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.groupUserId)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.id=[]
        if(row.id || this.ids!=''){
           this.open=true
           this.id.push(row.groupUserId)
        }else{
          this.$message({
            message: '请选择要添加的好友！',
            type: 'warning'
          });
        }     
      },
      /** 提交按钮 */
      submitForm() {
          var applyContent=this.applyContent
          var wcId=this.$route.query.wxid
          var arr=this.ids
          if(this.id!=''){
            arr=this.id
          }
          if(applyContent==''||applyContent==null){
            this.$message({
                message: '请输入或选择申请好友用语！',
                type: 'warning'
            });
            return
          }
          addUser({wcId,remark:applyContent,friends:arr}).then(response => {
              this.$modal.msgSuccess("发送成功");
              this.applyContent=null
              this.open = false;
          });
      },
      
    }
  }
  /** js请求 调用 */
  
  // 查询微信群成员列表
  export function listWcGroupsUser(query) {
    return request({
      url: '/arbit/wcgroups_user/page',
      method: 'get',
      params: query
    })
  }
  
  // 删除微信群成员
  export function addUser(data) {
    return request({
      url: '/arbit/wcfriend_info/addWc',
      method: 'post',
      data:data,
    })
  }
  // 查询助手招呼语设置列表
  export function page(query) {
    return request({
      url: '/wcUserTerms/page',
      method: 'get',
      params: query
    })
  }
  </script>
   <style lang="scss">
     .my-autocomplete {
      width: 260px;
       li {
         line-height: normal;
         padding: 7px;
     
         .name {
          //  text-overflow: ellipsis;
          //  overflow: hidden;
          white-space: normal;
          overflow: auto;
          line-height: 30px;
         }
         .addr {
           font-size: 12px;
           color: #b4b4b4;
         }
     
         .highlighted .addr {
           color: #ddd;
         }
       }
     }
   </style>
  <style scoped lang="scss">
     .app-container{
       background-color: #f6f9fb;
     }
     .linebtn{
        display: flex;
        margin: -10px 0 10px 5px;
        height: 40px;
        .btn{
            width: 100px;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            color: #8c8c8c;
            margin-right: 10px;
            border: 1px solid #eaeff2;
            background-color: #fff;
            border-radius: 5px;
            .link-type{
              color: #8c8c8c;
            }
        }
        .select{
            background-color: #eaf6ff;
            border:1px solid #288dfc;
            color: #288dfc;
            font-weight: 550;
        }
    }
      .box-setups{
          display: flex;margin-bottom: 20px;margin-top: 20px;
      }
     .frominfo{
       display: flex;background-color: #fff;padding: 10px;padding-bottom: 0; margin-bottom: 20px;
       .from-item{
         display: flex;flex-wrap: wrap;width: 80%;
       }
       .from-Btn{
         display: flex;flex-direction: column;align-items: center;justify-content: center;width: 20%;
       }
     }
     .mb8{
       margin-bottom: 20px;
     }
     .blue-button {
       color: #fff;
       background-color: #0078fb;
       border-color: #0078fb;
     }
  </style>